<template>
	<view>
		<view class="cu-card dynamic no-card ">
			<view class="cu-item shadow" v-for="item in list.datas" :key="item.id">
				<view class="cu-list menu-avatar" @click="goTo" data-path="/pages/detail/detail">
					<view class="cu-item">
						<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
						<view class="content flex-sub">
							<view>凯尔{{item.id}}</view>
							<view class="text-gray text-sm flex justify-between">
								2019年12月3日
							</view>
						</view>
					</view>
				</view>
				<view class="text-content" @click="goTo" data-path="/pages/detail/detail">
					折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
				</view>
				<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
					<view class="bg-img" :class="isCard?'':'only-img'" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"
					 v-for="(item,index) in isCard?9:1" :key="index">
					</view>
				</view>
				<view class="text-gray text-sm text-right padding">
					<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
					<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
					<text class="cuIcon-messagefill margin-lr-xs"></text> 30
				</view>
			</view>
		</view>
		<uni-load-more :status="list.status" :content-text="list.statusText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				isCard: false
			};
		},
		computed: {
			list() {
				return {
					datas: this.listData.list,
					status: this.listData.loadStatus, //more、loading、noMore
					statusText: {
						contentdown: '上拉查看更多',
						contentrefresh: '努力加载中',
						contentnomore: '没有更多数据'
					}

				};
			}
		},
		methods: {
			goTo: function(e) {
				var url = e.currentTarget.dataset.path;
				this.$util.goTo(url);
			}
		},
		props: {
			listData: { //数据列表
				type: Object,
				default () {
					return {
						list: [],
						loadStatus: "noMore" //加载状态 
					}; //{list:[],LoadStatus:""noMore}
				}
			}
		}
	}
</script>

<style>

</style>
